<template>
  <div>
    my is child
    <div v-html="innerData"></div>
    <button @click="handleTest">测试</button>
    <div class="warap">
      <header>
        <slot></slot>
      </header>
      <main>
        <slot name="main" :scope="listData"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import request from "@/utils/request";
import "@/api/index";
export default {
  props: {
    innerData: {
      type: String,
      default: "",
    },
    handleClick: {},
  },
  computed: {
    ...mapState(["flageTools"]),
    ...mapGetters(["setFlageTools"]),
    setData() {},
  },
  data() {
    return {
      listData: {
        row: {
          age: 123,
          name: "sds",
          class: "123131",
        },
        scope: {},
      },
      list: [
        {
          name: "123",
          age: 20,
        },
      ],
    };
  },
  created() {
    request.get("/api/list").then((res) => {
      console.log(res, "res");
      console.log(res.data.list, "list");
      // this.$store.dispatch("setListData", res.data.list);
      this.$store.commit("setData", res.data.list);
    });
  },
  mounted() {},
  methods: {
    handleTest() {
      console.log(this.$parent);
      this.$parent.isShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.warap {
  width: 100%;
  height: 100px;
}
</style>